<template>
  <div>
    <!-- 添加按钮 -->
    <el-card>
      <el-row>
        <el-button class="addcomp" type="primary" @click="openadd"
          >添加保险公司</el-button
        >
      </el-row>
    </el-card>
    <!-- //数据渲染 -->
    <el-table :data="insurelist.list" border center :header-cell-style="headClass" :cell-style="rowClass">
      <el-table-column prop="safecompany_id" label="编号"> </el-table-column>
      <el-table-column prop="safecompany_name" label="公司名称">
      </el-table-column>
      <el-table-column prop="safecompany_ShortName" label="公司短名">
      </el-table-column>
      <el-table-column
        prop="safecompany_phone"
        label="公司报案电话"
      ></el-table-column>
      <el-table-column prop="safecompany_payFor" label="是否支持垫付">
        <template slot-scope="scope">
          <!-- <span>{{scope.row.adminId}}</span> -->
          <span v-if="scope.row.safecompany_payFor === true">是</span>
          <span v-else>否</span>
          <!-- <el-tag v-else type="danger">不可用</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="safecompany_address"
        label="保险公司地址"
      ></el-table-column>
      <el-table-column prop="action" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="updateopen(scope.row)">修改</el-button>
          <el-button
            type="danger"
            @click="delcompa(scope.row.safecompany_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <el-dialog
      title="添加保险公司"
      :visible.sync="dialogFormaddVisible"
      width="30%"
    >
      <el-form ref="addform">
        <el-form-item label="保险公司名称" prop="safecompany_name">
          <el-input
            autocomplete="off"
            size="small"
            v-model="addform.safecompany_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="保险公司短名称" prop="safecompany_ShortName">
          <el-input
            autocomplete="off"
            size="small"
            v-model="addform.safecompany_ShortName"
          ></el-input>
        </el-form-item>
        <el-form-item label="保险公司报案电话" prop="safecompany_phone">
          <el-input
            autocomplete="off"
            size="small"
            v-model="addform.safecompany_phone"
          ></el-input>
        </el-form-item>
        <el-form-item prop="safecompany_payFor" label="是否支持垫付">
          <el-radio-group v-model="addform.safecompany_payFor">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="保险公司地址" prop="safecompany_address">
          <el-input
            autocomplete="off"
            size="small"
            v-model="addform.safecompany_address"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addcompa()" type="primary">保 存</el-button>
        <el-button @click="dialogFormaddVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改   -->
    <el-dialog
        title="修改保险公司"
        :visible.sync="dialogFormupdateVisible"
        width="30%"
    >
      <el-form ref="updateform">
        <el-form-item label="保险公司名称" prop="safecompany_name">
          <el-input
              autocomplete="off"
              size="small"
              v-model="updateform.safecompany_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="保险公司短名称" prop="safecompany_ShortName">
          <el-input
              autocomplete="off"
              size="small"
              v-model="updateform.safecompany_ShortName"
          ></el-input>
        </el-form-item>
        <el-form-item label="保险公司报案电话" prop="safecompany_phone">
          <el-input
              autocomplete="off"
              size="small"
              v-model="updateform.safecompany_phone"
          ></el-input>
        </el-form-item>
        <el-form-item prop="safecompany_payFor" label="是否支持垫付">
          <el-radio-group v-model="updateform.safecompany_payFor">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="保险公司地址" prop="safecompany_address">
          <el-input
              autocomplete="off"
              size="small"
              v-model="updateform.safecompany_address"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="update()" type="primary">保 存</el-button>
        <el-button @click="dialogFormupdateVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <div class="fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="insurelist.total"
        :page-size="insurelist.pageSize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "insuremanage",
  data() {
    return {
      //页面数据
      insurelist: [],
      //当前页
      currentpage: 1,
      //添加隐藏框
      dialogFormaddVisible: false,
      dialogFormupdateVisible:false,
      addform: {
        safecompany_name: "",
        safecompany_ShortName: "",
        safecompany_phone: "",
        safecompany_payFor: "",
        safecompany_address: ""
      },
      updateform:{}
    };
  },
  methods: {
    //请求所有数据
    getpage(page, limit) {
      this.$axios
        .post(
            // ,this.$api.login.insuremanage.delete
          this.$api.login.insuremanage.findAllByPage,
          {
            page: page,
            limit: limit
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.insurelist = response.data.data;
            console.log(this.insurelist);
          }
          console.log(response);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //分页按钮获取当前页得数据以及当前页
    handleCurrentChange(val) {
      this.currentpage = val;
      this.getpage(this.currentpage, 5);
    },
    //添加
    openadd() {
      this.dialogFormaddVisible = true;
    },

    addcompa() {
      // if()
      this.$axios
        .post(
            // ,this.$api.login.insuremanage.delete
            this.$api.login.insuremanage.insert,
          {
            safeCompanyId: "",
            safeCompanyName: this.addform.safecompany_name,
            safeCompanyShortName: this.addform.safecompany_ShortName,
            safeCompanyPhone: this.addform.safecompany_phone,
            safeCompanyPayFor: this.addform.safecompany_payFor,
            safeCompanyAddress: this.addform.safecompany_address
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          if (response.data.code === "200") {
            console.log(response);
            this.$message({
              type: "success",
              message: "添加成功!"
            });
            this.getpage(this.currentpage, 5);
          } else {
            this.$message({
              type: "success",
              message: "添加失败!"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.dialogFormaddVisible = false;
    },
    //删除
    delcompa(val) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //发起删除请求
          this.$axios
            .post(
                // ,this.$api.login.insuremanage.delete
                this.$api.login.insuremanage.delete,
              {
                safeCompanyId: val
              },
              {
                headers: {
                  "Content-Type": "application/json"
                }
              }
            )
            .then(response => {
              if (response.data.code === "200") {
                console.log(response);
                this.getpage(this.currentpage, 5);
                console.log(response);
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              } else {
                this.$message({
                  type: "success",
                  message: response.data.msg
                });
              }
            });
        })
        .catch(err => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //打开修改框
    updateopen(val){
      this.dialogFormupdateVisible=true
      this.updateform = {...val}
      console.log(val);
    },
    //修改
    update(){
      this.dialogFormupdateVisible=false
      this.$axios.post(this.$api.login.insuremanage.update,{
          safeCompanyId:this.updateform.safecompany_id,
          safeCompanyName:this.updateform.safecompany_name,
          safeCompanyShortName:this.updateform.safecompany_ShortName,
          safeCompanyPhone:this.updateform.safecompany_phone,
          safeCompanyPayFor:this.updateform.safecompany_payFor,
          safeCompanyAddress:this.updateform.safecompany_address
      }).then(res=>{
        console.log(res);
        if (res.data.code==="200"){
          this.$message.success("修改成功")
          this.getpage(this.currentpage, 5);
        }else {
          this.$message.info('修改失败')
        }
      }).catch(err=>{
        this.$message.error("修改失败")
        console.log(err)
      })

    },
    rowClass() { //表格数据居中显示
      return "text-align:center"
    },
    headClass() { //表头居中显示
      return "text-align:center"
    },
  },
  //获取数据并渲染
  created() {
    this.getpage(1, 5);
  }
};
</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
}

.addcomp {
  float: left;
}
.is-leaf {
  text-align: center !important;
}
.el-card__body {
  padding: 20px;
}
</style>
